<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义动画</title>
		<style>
			#d1 {
				width: 200px;
				/* border: 2px solid red; */
			}
			#d1 img:hover{
				cursor: pointer;
				animation: move 5s ease 0s 10 normal running forwards;
			}
			@keyframes move {
				from {
					transform: rotate(0deg);
				}

				1% {
					transform: rotate(4deg);
				}

				4% {
					transform: rotate(14deg);
				}

				7% {
					transform: rotate(25deg);
				}

				10% {
					transform: rotate(36deg);
				}

				13% {
					transform: rotate(47deg);
				}

				16% {
					transform: rotate(58deg);
				}

				19% {
					transform: rotate(68deg);
				}

				22% {
					transform: rotate(79deg);
				}

				25% {
					transform: rotate(90deg);
				}

				28% {
					transform: rotate(101deg);
				}

				31% {
					transform: rotate(112deg);
				}

				34% {
					transform: rotate(122deg);
				}

				37% {
					transform: rotate(133deg);
				}

				40% {
					transform: rotate(144deg);
				}

				43% {
					transform: rotate(155deg);
				}

				46% {
					transform: rotate(166deg);
				}

				49% {
					transform: rotate(176deg);
				}

				52% {
					transform: rotate(187deg);
				}

				55% {
					transform: rotate(198deg);
				}

				58% {
					transform: rotate(209deg);
				}

				61% {
					transform: rotate(220deg);
				}

				64% {
					transform: rotate(230deg);
				}

				67% {
					transform: rotate(241deg);
				}

				70% {
					transform: rotate(252deg);
				}

				73% {
					transform: rotate(263deg);
				}

				76% {
					transform: rotate(274deg);
				}

				79% {
					transform: rotate(284deg);
				}

				82% {
					transform: rotate(295deg);
				}

				85% {
					transform: rotate(306deg);
				}

				88% {
					transform: rotate(317deg);
				}

				91% {
					transform: rotate(328deg);
				}

				94% {
					transform: rotate(338deg);
				}

				97% {
					transform: rotate(349deg);
				}


				to {
					transform: rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<img src="../image/ilove.png" />
		</div>
	</body>
</html>
